<template>
    <div class="cell-item">
        <LabelRow v-bind:onMore="onMore" v-bind:label="label"></LabelRow>
        <div class="db-content">
            <div class="row">
                <div class="db-title">通讯</div>
                <ul class="db-record">
                    <li>
                        <label>接听电话：</label>
                        <span class="db-record-num">{{datas.answerCount||0}}</span>
                        <span>通</span>
                    </li>
                    <li>
                        <label>外拨电话：</label>
                        <span class="db-record-num">{{datas.callCount||0}}</span>
                        <span>通</span>
                    </li>
                    <li>
                        <label>事件上报：</label>
                        <span class="db-record-num">{{datas.reportCount||0}}</span>
                        <span>件</span>
                    </li>
                    <!-- <li>
                        <label>督促跟进：</label>
                        <span class="db-record-num">50</span>
                        <span>通</span>
                    </li> -->
                </ul>
            </div>
            <div class="row">
                <div class="db-title">事件</div>
                <ul class="db-record">
                    <li>
                        <label>市级交办：</label>
                        <span class="db-record-num">{{datas.handOverCount||0}}</span>
                        <span>件</span>
                    </li>
                    <li>
                        <label>市级办结：</label>
                        <span class="db-record-num">{{datas.highFinishCount||0}}</span>
                        <span>件</span>
                    </li>
                    <li>
                        <label>本级新增：</label>
                        <span class="db-record-num">{{datas.myAddCount||0}}</span>
                        <span>件</span>
                    </li>
                    <li>
                        <label>本级办结：</label>
                        <span class="db-record-num">{{datas.myFinishCount||0}}</span>
                        <span>件</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import LabelRow from "../common/labelRow.vue";
import { ZHZXEventInfoDutyInfo } from "../../config/api.js";
import Pubsub from "../../utils/pubsub";

export default {
    components: {
        LabelRow
    },
    data() {
        return {
            label: {
                url: require("../../assets/8512345/dbjl-icon.png"),
                label: "当班记录"
            },
            datas: {}
        };
    },
    created() {
          this.pubsub_token1 = Pubsub.subscribe("ZHZX_WORKBENCH_DUTY_INFO", (t, args) => {
            this.getList();
        });
        this.getList();
    },
     destroyed() {
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
    },
    methods: {
        onMore() {},
        getList() {
            ZHZXEventInfoDutyInfo({ pageNum: 1, pageSize: 20 }).then(
                (res = {}) => {
                    this.datas = res.data;
                    console.log(res.data);
                }
            );
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.db-content {
    display: flex;
    box-sizing: border-box;
    padding: 30px 10px 50px 10px;
    height: 294px;
    .row {
        flex: 1;
        margin: 0 25px;
        background: url("../../assets/8512345/jl-bg.png") no-repeat;
        background-size: 100% 100%;
    }
    .db-title {
        padding-top: 25px;
        font-size: 16px;
        padding-left: 10px;
        text-align: center;
        color: #1a36a9;
    }
    .db-record {
        // font-size: 16px;
        text-align: center;
        margin-top: 20px;
        li {
            margin-top: 5px;
        }
    }
    .db-record-num {
        color: #ffaa00;
        font-size: 18px;
        min-width: 22px;
        display: inline-block;
    }
}
</style>
